<style lang="scss" scoped>
	.banner {
		background-color: $uni-color-primary;
		height: 150px;
		color: #fff;
		.card {
			padding: 30px;
			text-align: center;
			.num {
				margin-top: 10px;
				font-size: 35px;
			}
		}
	}
	.grid {
		padding: 10px;
		box-sizing: border-box;
		.uni-grid-item:nth-child(even) {
			.inner {
				margin-left: 15px;
			}
		}
		.inner {
			background-color: #fff;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 10px;
			border-radius: 10px;
			.xyicon {
				font-size: 30px;
			}
			.title {
				padding-top: 12px;
			}
		}
	}
	.code {
		text-align: center;
		color: #333;
	}
</style>

<template>
	<view class="wrap">
		<view class="banner m-b">
			<view class="card">
				<view class="title">
					当前积分
				</view>
				<view class="num">
					 {{dataList[0].balance}}
				</view>
			</view>
		</view>
		<uni-grid class="grid" :column="2" :showBorder="false">
			<uni-grid-item @click.native="share">
				<view class="inner">
					<view class="xyicon xyicon-qrcode text-primary"></view>
					<view class="title">
						分享海报
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item @click.native="navTo('/pages/user_invite/invite/my')">
				<view class="inner">
					<view class="xyicon xyicon-level text-primary"></view>
					<view class="title">
						推广人统计
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item @click.native="navTo('/pages/user_score/score_log/my?typeId=2')">
				<view class="inner">
					<view class="xyicon xyicon-statistics1 text-primary"></view>
					<view class="title">
						积分记录
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item
				v-show="$store.state.app.siteInfo.versionFuncsAll.indexOf('scoreshop') >= 0"
				@click.native="navTo('/pages/scoreshop/item/lists')">
				<view class="inner">
					<view class="xyicon xyicon-store text-primary"></view>
					<view class="title">
						积分商城
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<view class="code">
			邀请码：{{info.inviteCode}}
		</view>
		<!-- 分享 -->
		<xy-share ref="share" :contentHeight="1181"></xy-share>
		<xy-poster
			ref="poster"
		    :postersData="postersData"
		    @success="onSuccessCreatePosters"
		    @error="onPostersError">
		</xy-poster>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		components: {
		},
		data() {
			return {
				dataList: [
					{
						balance: 0.00
					}
				],
				info: {
					title: '',
					inviteCode: '加载中...'
				},
				qrcode: this.util.baseDomain(),
				postersData: {},
				posterImg: {
					path: ''
				}
			}
		},
		computed: {
			...mapState(['app', 'user'])
		},
		onLoad(option) {
			this.loadData();
			console.log(this.qrcode);
			// 用户访问任意页面时要在全局APP.vue里记录inviteCode到localstorge,然后在注册页面自动读取。
		},
		onShow(){
			if (this.info.title) {
				// this.share();
			}
		},
		methods: {
			qrR(e){
				console.log(e);
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			async loadData() {
				let res = await this.util.request({
					url: '/v1/user_score/score/my',
					method: 'get'
				});
				if (res.code == 200) {
					this.dataList = res.data.dataList;
				}
				let res1 = await this.util.request({
					url: '/v1/user_invite/invite/code',
					method: 'get'
				});
				if (res1.code == 200) {
					this.info = res1.data.info;
					this.qrcode = this.util.baseDomain() + '?inviteCode=' + this.info.inviteCode;
				}
			},
			//分享
			share(){
				this.util.showToast({
					title: '海报生成中...',
					icon: 'loading',
					duration: 10000
				});
				this.initPostersConfig();
				this.$refs.poster.createPosters(this.postersData);
			},
			realShare(){
				this.$refs.share.togglePopup({
					systemShare: true, // 是否在APP上启用系统分享避免需要申请各种appid
					type: 2, // 0图文1文字2图片
					title: this.info.title,
					summary: this.info.title,
					imageUrl: this.posterImg.path,
					imageWidth: '600rpx',
					imageHeight: '881rpx',
					href: this.qrcode,
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			initPostersConfig() {
				const config = {
					clear: true,
					width: 750,
					height: 1181,
					background: '#ffffff',
					views: [
						{
							type: 'image',
							width: 750,
							height: 1181,
							top: 0,
							left: 0,
							url: '/static/share.png'
						},
						{
							type: 'text',
							width: 400,
							height: 50,
							left: 20,
							top: 680,
							fontSize: 30,
							lineHeight: 40,
							bolder: true,
							breakWord: true,
							content: '        ',
							MaxLineNumber: 2
						},
						{
							type: 'text',
							width: 400,
							height: 50,
							left: 20,
							top: 690,
							fontSize: 24,
							lineHeight: 40,
							bolder: true,
							breakWord: true,
							content: '',
							color: '#ffffff',
							MaxLineNumber: 2
						},
						{
							type: 'text',
							width: 400,
							left: 320,
							top: 1050,
							fontSize: 28,
							bolder: true,
							breakWord: true,
							content: this.info.inviteCode,
							color: '#ffffff',
							MaxLineNumber: 1
						},
						{
							type: 'image',
							width: 140,
							height: 140,
							top: 1020,
							left: 470,
							// 二维码图片路径，测试的时候填上
							url: this.$store.state.app.siteInfo.qrcodeApi + this.qrcode
						},
						{
							type: 'image',
							width: 90,
							height: 90,
							top: 1050,
							left: 70,
							radius: 50,
							url: this.util.imageCache(this.user.userInfo.avatar)
						},
					]
				};
				this.postersData = config;
			},
			onSuccessCreatePosters(res) {
				console.log(res);
				uni.hideToast();
				this.posterImg = res;
				this.realShare();
			},
			onPostersError(res) {
				console.log(res)
			}
		}
	}
</script>
